import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// Stack Align Positioned的使用与区别
///

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Stack  层叠布局'),
      ),
      body: const MyStack3(),
    ),
  ));
}

/// 1.默认情况下的Stack里面的子元素是直接堆积重叠的
/// Image如果不指定宽高的话，默认是根据图片大小自适应内容大小的
class MyStack extends StatefulWidget {
  const MyStack({super.key});

  @override
  State<MyStack> createState() => _MyStackState();
}

class _MyStackState extends State<MyStack> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 250,
          height: 250,
          color: Colors.green,
        ),
        Image.network(
          'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
          fit: BoxFit.fill,
          width: 150,
        ),
        const Text(
          '你好 Flutter!!!!!',
          style: TextStyle(color: Colors.white),
        ),
      ],
    );
  }
}

/// 2,如果对stack里面的组件定位，则需要 依赖Positioned来进行
/// stack的大小是被子元素里面的最大者 撑起来的

class MyStack2 extends StatelessWidget {
  const MyStack2({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          bottom: 0,
          right: 0,
          width: 301,
          height: 301,
          child: Image.network(
            'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
            fit: BoxFit.fill,
            width: 300,
            height: 300,
          ),
        ),
        Container(
          width: 250,
          height: 250,
          color: Colors.green,
        ),
        Image.network(
          'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
          fit: BoxFit.fill,
          width: 200,
          height: 300,
        ),
        const Text(
          '你好 Flutter!!!!!',
          style: TextStyle(color: Colors.white),
        ),
      ],
    );
  }
}

/// 3.固定导航案例
///

class MyStack3 extends StatelessWidget {
  const MyStack3({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView(
          padding: EdgeInsets.only(top: 44),
          children: const [
            ListTile(
              title: Text('这是第0行元素========='),
            ),
            ListTile(
              title: Text('这是第1行元素========='),
            ),
            ListTile(
              title: Text('这是第2行元素========='),
            ),
            ListTile(
              title: Text('这是第3行元素========='),
            ),
            ListTile(
              title: Text('这是第4行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
            ListTile(
              title: Text('这是第几行元素========='),
            ),
          ],
        ),
        Container(
          alignment: Alignment.center,
          color: Colors.red,
          height: 44,
          width: double.infinity,
          child: const Text('这是悬浮按钮'),
        ),
        Positioned(
            bottom: 44,
            right: 20,
            child: Container(
              height: 80,
              width: 80,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(40),
              ),
            ))
      ],
    );
  }
}
